/*^^^^^^^^^^^^^^^^^^^^^^inscription design*/
 @import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');

 :focus{outline: none;}
 
 /* necessary to give position: relative to parent. */

 
 :focus{outline: none;}
 
 /* necessary to give position: relative to parent. */
 .col-30{display: inline-block;  width: 300px;  position: relative; border: 0px solid #000000;  }
 .flotant_inscription .formulaire_inscription .col-03{margin-left: 20px; width: 160px; margin-top: 108px ; position: absolute;}
 .flotant_inscription .formulaire_inscription .col-003{margin-left: 18px; width: 160px; margin-top: 266px ; position: absolute;}
 
 .effect-1, 
 .effect-2, 
 .effect-3{border: 0; width:100px; padding: 7px 0; border-bottom: 1px solid #ccc;}
 
 .effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #e46e00; transition: 0.4s;}
 .effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}
 
 .effect-2 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #e46e00; transition: 0.4s;}
 .effect-2:focus ~ .focus-border{width: 100%; transition: 0.4s; left: 0;}
 
 .effect-3 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99;}
 .effect-3 ~ .focus-border:before, 
 .effect-3 ~ .focus-border:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #e46e00; transition: 0.4s;}
 .effect-3 ~ .focus-border:after{left: auto; right: 0;}
 .effect-3:focus ~ .focus-border:before, 
 .effect-3:focus ~ .focus-border:after{width: 50%; transition: 0.4s;}
 
 .effect-4,
 .effect-5,
 .effect-6{border: 0; padding: 5px 0 7px; border: 1px solid transparent; border-bottom-color: #ccc; transition: 0.4s;}
 
 .effect-4:focus,
 .effect-5:focus,
 .effect-6:focus{padding: 5px 14px 7px; transition: 0.4s;}
 
 .effect-4 ~ .focus-border{position: absolute; height: 0; bottom: 0; left: 0; width: 100%; transition: 0.4s; z-index: -1;}
 .effect-4:focus ~ .focus-border{transition: 0.4s; height: 36px; border: 2px solid #e46e00; z-index: 1;}
 
 .effect-5 ~ .focus-border{position: absolute; height: 36px; bottom: 0; left: 0; width: 0; transition: 0.4s;}
 .effect-5:focus ~ .focus-border{width: 100%; transition: 0.4s; border: 2px solid #e46e00;}
 
 .effect-6 ~ .focus-border{position: absolute; height: 36px; bottom: 0; right: 0; width: 0; transition: 0.4s;}
 .effect-6:focus ~ .focus-border{width: 100%; transition: 0.4s; border: 2px solid #e46e00;}
 
 .effect-7,
 .effect-8,
 .effect-9{border: 1px solid #ccc; padding: 7px 14px 9px; transition: 0.4s;}
 
 .effect-7 ~ .focus-border:before,
 .effect-7 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #e46e00; transition: 0.4s;}
 .effect-7 ~ .focus-border:after{top: auto; bottom: 0;}
 .effect-7 ~ .focus-border i:before,
 .effect-7 ~ .focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #e46e00; transition: 0.6s;}
 .effect-7 ~ .focus-border i:after{left: auto; right: 0;}
 .effect-7:focus ~ .focus-border:before,
 .effect-7:focus ~ .focus-border:after{left: 0; width: 100%; transition: 0.4s;}
 .effect-7:focus ~ .focus-border i:before,
 .effect-7:focus ~ .focus-border i:after{top: 0; height: 100%; transition: 0.6s;}
 
 .effect-8 ~ .focus-border:before,
 .effect-8 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #e46e00; transition: 0.3s;}
 .effect-8 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
 .effect-8 ~ .focus-border i:before,
 .effect-8 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #e46e00; transition: 0.4s;}
 .effect-8 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
 .effect-8:focus ~ .focus-border:before,
 .effect-8:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
 .effect-8:focus ~ .focus-border i:before,
 .effect-8:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}
 
 .effect-9 ~ .focus-border:before,
 .effect-9 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #e46e00; transition: 0.2s; transition-delay: 0.2s;}
 .effect-9 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
 .effect-9 ~ .focus-border i:before,
 .effect-9 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #e46e00; transition: 0.2s;}
 .effect-9 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
 .effect-9:focus ~ .focus-border:before,
 .effect-9:focus ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
 .effect-9:focus ~ .focus-border:after{transition-delay: 0.2s;}
 .effect-9:focus ~ .focus-border i:before,
 .effect-9:focus ~ .focus-border i:after{height: 100%; transition: 0.2s;}
 .effect-9:focus ~ .focus-border i:after{transition-delay: 0.4s;}
 
 .effect-10, 
 .effect-11, 
 .effect-12,
 .effect-13,
 .effect-14,
 .effect-15{border: 0; padding: 7px 15px; border: 1px solid #ccc; position: relative; background: transparent;}
 
 .effect-10 ~ .focus-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ededed; opacity: 0; transition: 0.5s; z-index: -1;}
 .effect-10:focus ~ .focus-bg{transition: 0.5s; opacity: 1;}
 
 .effect-11 ~ .focus-bg{position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #ededed; transition: 0.3s; z-index: -1;}
 .effect-11:focus ~ .focus-bg{transition: 0.3s; width: 100%;}
 
 .effect-12 ~ .focus-bg{position: absolute; left: 50%; top: 0; width: 0; height: 100%; background-color: #ededed; transition: 0.3s; z-index: -1;}
 .effect-12:focus ~ .focus-bg{transition: 0.3s; width: 100%; left: 0;}
 
 .effect-13 ~ .focus-bg:before,
 .effect-13 ~ .focus-bg:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #9c9c9c; transition: 0.3s; z-index: -1;}
 .effect-13:focus ~ .focus-bg:before{transition: 0.3s; width: 50%;}
 .effect-13 ~ .focus-bg:after{left: auto; right: 0;}
 .effect-13:focus ~ .focus-bg:after{transition: 0.3s; width: 50%;}
 
 .effect-14 ~ .focus-bg:before,
 .effect-14 ~ .focus-bg:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
 .effect-14:focus ~ .focus-bg:before{transition: 0.3s; width: 50%; height: 100%;}
 .effect-14 ~ .focus-bg:after{left: auto; right: 0; top: auto; bottom: 0;}
 .effect-14:focus ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%;}
 
 .effect-15 ~ .focus-bg:before,
 .effect-15 ~ .focus-bg:after{content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
 .effect-15:focus ~ .focus-bg:before{transition: 0.3s; width: 50%; left: 0; top: 0; height: 100%;}
 .effect-15 ~ .focus-bg:after{left: auto; right: 50%; top: auto; bottom: 50%;}
 .effect-15:focus ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%; bottom: 0; right: 0;}
 
 
 .effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #e46e00; transition: 0.4s;}
 .effect-16:focus ~ .focus-border,
 .has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
 .effect-16 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #e2e2e2; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #f1ca1e; transition: 0.3s;}
 
 
 /* =============================================ICI===============================================*/

 .effect-16, 
 .effect-17, 
 .effect-017,
 .effect-18{ border: 0;  padding: 0px 0; border-bottom: 1px solid rgb(100, 100, 100); background-color: rgba(255, 255, 255, 0.397); color:#242424;}
 .effect-demande{ border: 0;  padding: 0px 0; border-bottom: 1px solid rgb(83, 112, 238); background-color: #6f6fff46; color:#242424;}
 .effect-demande_input{ border: 0;  padding: 0px 0; border-bottom: 1px solid rgb(83, 112, 238); background-color: #9d9df746; color:#242424;}
 .effect_date{ border: 0;  padding: 0px 0; border-bottom: 1px solid rgb(100, 100, 100); background-color: rgba(255, 255, 255, 0.397); color:#ffffff;}
 .effect-17 ~ .focus-border{
     position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 2px; 
    background-color: #f1611e; 
    transition: 0.4s;
}
.effect_date ~ .focus-border{
    position: absolute; 
   bottom: 0; 
   left: 50%; 
   width: 0; 
   height: 2px; 
   background-color: #f1611e; 
   transition: 0.4s;
}
 .effect-17:focus ~ .focus-border,
 .has-content.effect-17 ~ .focus-border{
     width: 105%; 
     transition: 0.4s; 
     left: 0;
     overflow: hidden;
    }
 .effect-17 ~ label{
     position: absolute; 
     left: 0; width: 100%; 
     top:2px;
     font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 12px;
     color: rgb(24, 24, 24); 
     transition: 0.3s; 
     z-index: -1; 
     letter-spacing: 0.5px;
    }
 .effect-17:focus ~ label, .has-content.effect-17 ~ label{
     top: -20px; 
     font-size: 12px; 
     color: #4c6697; 
     transition: 0.3s;
    }
 

 .effect-017 ~ .focus-border{
     position: absolute; 
     bottom: 0; left: 50%; 
     width: 0; height: 2px; 
     background-color: #f1611e; 
     transition: 0.4s;
    }
 .effect-017:focus ~ .focus-border,
 .has-content.effect-017 ~ .focus-border{
     width: 110%; 
     transition: 0.4s; 
     left: 0;
    }
 .effect-017 ~ label{
     position: absolute; 
     left: 0; 
     width: 100%; 
     top: -20px; 
     text-align: left;
     font-size: 13px;
     color: #4c6697; 
     transition: 0.4s; 
     z-index: -1; 
     letter-spacing: 0.5px;
     transition: 0.4s;
    }
    .effect-demande ~ label{
        position: absolute; 
        left: 0; 
        width: 100%; 
        top: -20px; 
        text-align: left;
        font-size: 13px;
        color: #92b6fa; 
        transition: 0.4s; 
        z-index: -1; 
        letter-spacing: 0.5px;
        transition: 0.4s;
       }
       .effect-demande_input ~ label{
        position: absolute; 
        left: 0; 
        width: 100%; 
        top: -20px; 
        text-align: left;
        font-size: 13px;
        color: #92b6fa; 
        transition: 0.4s; 
        z-index: -1; 
        letter-spacing: 0.5px;
        transition: 0.4s;
       }
 .effect-017:focus ~ label, .has-content.effect-017 ~ label{
     top: -20px; 
     font-size: 12px; 
     color: #858df7; 
     transition: 0.3s;
     
    }
    .effect_date:focus ~ label, .has-content.effect-017 ~ label{
        top: -20px; 
        font-size: 12px; 
        color: #ffffff; 
        transition: 0.3s;
        
       }
   


 .effect-date{border: 0; width: 165px; border-bottom: 1px solid #ccc; background-color: transparent; color:rgb(255, 247, 238)}
 .effect-date ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #e46e00; transition: 0.4s;}
 .effect-date:focus ~ .focus-border,
 .has-content.effect-date ~ .focus-border{width: 110%; transition: 0.4s; left: 0;}
 .effect-date ~ label{position: absolute; left: 0; width: 100%; top: -20px; color: #d6d6d6; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-date:focus ~ label, .has-content.effect-date ~ label{top: -20px; font-size: 12px; color: #ffffff; transition: 0.3s;}



 .effect-18 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99;}
 .effect-18 ~ .focus-border:before, 
 .effect-18 ~ .focus-border:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #e46e00; transition: 0.4s;}
 .effect-18 ~ .focus-border:after{left: auto; right: 0;}
 .effect-18:focus ~ .focus-border:before, 
 .effect-18:focus ~ .focus-border:after,
 .has-content.effect-18 ~ .focus-border:before,
 .has-content.effect-18 ~ .focus-border:after{width: 50%; transition: 0.4s;}
 .effect-18 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #e46e00; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-18:focus ~ label, .has-content.effect-18 ~ label{top: -16px; font-size: 12px; color: #e46e00; transition: 0.3s;}
 
 .effect-19,
 .effect-20,
 .effect-21{border: 1px solid #ccc; padding: 7px 14px; transition: 0.4s; background: transparent;}
 
 .effect-19 ~ .focus-border:before,
 .effect-19 ~ .focus-border:after{content: ""; position: absolute; top: -1px; left: 50%; width: 0; height: 2px; background-color: #e46e00; transition: 0.4s;}
 .effect-19 ~ .focus-border:after{top: auto; bottom: 0;}
 .effect-19 ~ .focus-border i:before,
 .effect-19 ~ .focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #e46e00; transition: 0.6s;}
 .effect-19 ~ .focus-border i:after{left: auto; right: 0;}
 .effect-19:focus ~ .focus-border:before,
 .effect-19:focus ~ .focus-border:after,
 .has-content.effect-19 ~ .focus-border:before,
 .has-content.effect-19 ~ .focus-border:after{left: 0; width: 100%; transition: 0.4s;}
 .effect-19:focus ~ .focus-border i:before,
 .effect-19:focus ~ .focus-border i:after,
 .has-content.effect-19 ~ .focus-border i:before,
 .has-content.effect-19 ~ .focus-border i:after{top: -1px; height: 100%; transition: 0.6s;}
 .effect-19 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #e46e00; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-19:focus ~ label, .has-content.effect-19 ~ label{top: -18px; left: 0; font-size: 12px; color: #e46e00; transition: 0.3s;}
 
 .effect-20 ~ .focus-border:before,
 .effect-20 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #e46e00; transition: 0.3s;}
 .effect-20 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
 .effect-20 ~ .focus-border i:before,
 .effect-20 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #e46e00; transition: 0.4s;}
 .effect-20 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
 .effect-20:focus ~ .focus-border:before,
 .effect-20:focus ~ .focus-border:after,
 .has-content.effect-20 ~ .focus-border:before,
 .has-content.effect-20 ~ .focus-border:after{width: 100%; transition: 0.3s;}
 .effect-20:focus ~ .focus-border i:before,
 .effect-20:focus ~ .focus-border i:after,
 .has-content.effect-20 ~ .focus-border i:before,
 .has-content.effect-20 ~ .focus-border i:after{height: 100%; transition: 0.4s;}
 .effect-20 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #e46e00; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-20:focus ~ label, .has-content.effect-20 ~ label{top: -18px; left: 0; font-size: 12px; color: #e46e00; transition: 0.3s;}
 
 .effect-21 ~ .focus-border:before,
 .effect-21 ~ .focus-border:after{content: ""; position: absolute; top: 0; right: 0; width: 0; height: 2px; background-color: #e46e00; transition: 0.2s; transition-delay: 0.2s;}
 .effect-21 ~ .focus-border:after{top: auto; bottom: 0; right: auto; left: 0; transition-delay: 0.6s;}
 .effect-21 ~ .focus-border i:before,
 .effect-21 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #e46e00; transition: 0.2s;}
 .effect-21 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0; transition-delay: 0.4s;}
 .effect-21:focus ~ .focus-border:before,
 .effect-21:focus ~ .focus-border:after,
 .has-content.effect-21 ~ .focus-border:before,
 .has-content.effect-21 ~ .focus-border:after{width: 100%; transition: 0.2s; transition-delay: 0.6s;}
 .effect-21:focus ~ .focus-border:after,
 .has-content.effect-21 ~ .focus-border:after{transition-delay: 0.2s;}
 .effect-21:focus ~ .focus-border i:before,
 .effect-21:focus ~ .focus-border i:after,
 .has-content.effect-21 ~ .focus-border i:before,
 .has-content.effect-21 ~ .focus-border i:after{height: 100%; transition: 0.2s;}
 .effect-21:focus ~ .focus-border i:after,
 .has-conten.effect-21 ~ .focus-border i:after{transition-delay: 0.4s;}
 .effect-21 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #e46e00; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-21:focus ~ label, .has-content.effect-21 ~ label{top: -18px; left: 0; font-size: 12px; color: #e46e00; transition: 0.3s;}
 
 .effect-22, 
 .effect-23, 
 .effect-24{border: 0; padding: 7px 15px; border: 1px solid #ccc; position: relative; background: transparent;}
 
 .effect-22 ~ .focus-bg{position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: transparent; transition: 0.4s; z-index: -1;}
 .effect-22:focus ~ .focus-bg, 
 .has-content.effect-22 ~ .focus-bg{transition: 0.4s; width: 100%; background-color: #ededed;}
 .effect-22 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #e46e00; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-22:focus ~ label, .has-content.effect-22 ~ label{top: -18px; left: 0; font-size: 12px; color: #333; transition: 0.3s;}
 
 .effect-23 ~ .focus-bg:before,
 .effect-23 ~ .focus-bg:after{content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
 .effect-23:focus ~ .focus-bg:before,
 .has-content.effect-23 ~ .focus-bg:before{transition: 0.3s; width: 50%; height: 100%;}
 .effect-23 ~ .focus-bg:after{left: auto; right: 0; top: auto; bottom: 0;}
 .effect-23:focus ~ .focus-bg:after,
 .has-content.effect-23 ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%;}
 .effect-23 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #e46e00; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-23:focus ~ label, .has-content.effect-23 ~ label{top: -18px; left: 0; font-size: 12px; color: #333; transition: 0.3s;}
 
 .effect-24 ~ .focus-bg:before,
 .effect-24 ~ .focus-bg:after{content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background-color: #ededed; transition: 0.3s; z-index: -1;}
 .effect-24:focus ~ .focus-bg:before,
 .has-content.effect-24 ~ .focus-bg:before{transition: 0.3s; width: 50%; left: 0; top: 0; height: 100%;}
 .effect-24 ~ .focus-bg:after{left: auto; right: 50%; top: auto; bottom: 50%;}
 .effect-24:focus ~ .focus-bg:after,
 .has-content.effect-24 ~ .focus-bg:after{transition: 0.3s; width: 50%; height: 100%; bottom: 0; right: 0;}
 .effect-24 ~ label{position: absolute; left: 14px; width: 100%; top: 10px; color: #e46e00; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
 .effect-24:focus ~ label, .has-content.effect-24 ~ label{top: -18px; left: 0; font-size: 12px; color: #333; transition: 0.3s;}